<template>
  <div class="hotel-detail" v-loading="loading">
    <div>
      <e-container>
        <div  style="margin:10px 0 0 0">
          <e-module-model-box title="详情">

            <div class="">
              <div class="goods-info clearfix">
                <div class="gallery-list">
                  <e-shangpinban :images="map.tupian"></e-shangpinban>
                </div>
                <div class="goods-right-content">
                  <h3 class="title" v-text="map.mingcheng"></h3>
                  <div class="descount">
                    <div>
                        <span class="name">
                            周边：
                        </span>
                      <span class="val">
                            {{  map.fujinjingdian  }}                        </span>
                    </div>
                    <div>
                        <span class="name">
                            所属地：
                        </span>
                      <span class="val">
                             <e-select-view module="hotelfenlei" :value="map.fenlei" select="id" show="fenleimingcheng"></e-select-view>                        </span>
                    </div>
                    <div>
                        <span class="name">
                            价格：
                        </span>
                      <span class="val">
                            {{ map.jiage }}                        </span>
                    </div>
                    <div>
                        <span class="name">
                            酒店简介：
                        </span>
                      <span class="val">
                            {{ map.hoteljianjie }}                        </span>
                    </div>
                  </div>

                  <div class="button-container" style="margin-top: 20px;">
                    <button @click="handleCollect" class="collect-button">收藏</button>
                    <button @click="handleBuy" class="buy-button">立即购买</button>
                  </div>
                </div>
              </div>
            </div>

          </e-module-model-box>


        </div>


      </e-container>
    </div>    </div>
</template>
<style type="text/scss" scoped lang="scss">
</style>
<script>
import api from '@/api';
import { extend } from '@/utils/extend';
export default {
  data() {
    return {
      loading:false,   // 加载
      isCollect:false, // 是否已经收藏
      map:{
        hotelbianhao:'',
        mingcheng:'',
        fujinjingdian:'',
        fenlei:'',
        tupian:'',
        jiage:'',
        hoteljianjie:'',
        addtime:'',
      },
    }
  },
  props:{
    id:{
      type:[String,Number],
      required:true
    }
  },
  watch: {
    id:{
      handler(){
        this.loadDetail();
      },
      immediate:true
    },
  },
  computed: {
  },
  methods: {

    handleCollect() {
      // 添加收藏逻辑
      this.$message.success('已收藏该酒店');
      // 这里可以添加跳转逻辑，例如

    },
    handleBuy() {
      // 跳转到购买页面
      this.$router.push('/purchase');
    },


  loadDetail(){
      if(this.loading) return;
      this.loading = true;
      this.$get(api.hotel.webdetail , {
        id:this.id
      }).then(res=>{
        this.loading = false;
        if(res.code == api.code.OK){
          extend(this,res.data);
        }else{
          this.$message.error(res.msg);
        }
      }).catch(err=>{
        this.loading = false;
        this.$message.error(err.message);
      });
    },

  },
  created() {
  },
  mounted() {
  },
  destroyed() {
  }
}
</script>